[@mantine/core] Add openOnFocus prop to Combobox based components (#5893)#8623
Conversation
…antinedev#5893) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds a new openOnFocus prop to several Combobox-based inputs to control whether their dropdown opens automatically when the input receives focus.
Changes:
- Introduces
openOnFocus?: booleantoTagsInput,Select,MultiSelect, andAutocomplete - Sets default behavior to open on focus (
true) and gatescombobox.openDropdown()behind the new flag - Updates focus handlers to respect
openOnFocus
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| packages/@mantine/core/src/components/TagsInput/TagsInput.tsx | Adds openOnFocus prop/default and conditions dropdown opening on input focus. |
| packages/@mantine/core/src/components/Select/Select.tsx | Adds openOnFocus prop/default and conditions dropdown opening on focus for searchable Select. |
| packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx | Adds openOnFocus prop/default and conditions dropdown opening on focus for searchable MultiSelect. |
| packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx | Adds openOnFocus prop (defaulted via destructuring) and conditions dropdown opening on focus. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** Clear search value when item is selected */ | ||
| clearSearchOnChange?: boolean; | ||
|
|
||
| /** If set, the dropdown opens when the input receives focus @default `true` */ |
There was a problem hiding this comment.
openOnFocus is only honored when searchable is true (see onFocus handler below). Please update this prop description to reflect that it does not open the dropdown on focus in non-searchable mode.
| /** If set, the dropdown opens when the input receives focus @default `true` */ | |
| /** If set and `searchable` is `true`, the dropdown opens when the input receives focus @default `true` */ |
| onFocus={(event) => { | ||
| onFocus?.(event); | ||
| combobox.openDropdown(); | ||
| openOnFocus && combobox.openDropdown(); | ||
| }} |
There was a problem hiding this comment.
Add test coverage for the new openOnFocus behavior: verify that by default focusing the input opens the dropdown, and that setting openOnFocus={false} prevents opening on focus (while other opening mechanisms still work).
| onFocus={(event) => { | ||
| !!searchable && combobox.openDropdown(); | ||
| openOnFocus && !!searchable && combobox.openDropdown(); | ||
| onFocus?.(event); | ||
| }} |
There was a problem hiding this comment.
Add tests for openOnFocus: for a searchable Select, focusing the input should open the dropdown by default, and should not open when openOnFocus={false} is set.
| onFocus={(event) => { | ||
| onFocus?.(event); | ||
| searchable && combobox.openDropdown(); | ||
| openOnFocus && searchable && combobox.openDropdown(); | ||
| }} |
There was a problem hiding this comment.
Add tests for openOnFocus: for a searchable MultiSelect, focusing the input should open the dropdown by default, and should not open when openOnFocus={false} is set.
| onFocus={(event) => { | ||
| combobox.openDropdown(); | ||
| openOnFocus && combobox.openDropdown(); | ||
| onFocus?.(event); | ||
| }} |
There was a problem hiding this comment.
Add tests for the new openOnFocus prop: by default focusing the input should open the dropdown, and openOnFocus={false} should prevent opening on focus.
| /** If set, the highlighted option is selected when the input loses focus @default `false` */ | ||
| autoSelectOnBlur?: boolean; | ||
|
|
||
| /** If set, the dropdown opens when the input receives focus @default `true` */ |
There was a problem hiding this comment.
openOnFocus docs are a bit misleading here: the dropdown only opens on focus when searchable is enabled (see onFocus handler below). Consider updating the prop description to mention that it affects focus behavior only for searchable Selects.
| /** If set, the dropdown opens when the input receives focus @default `true` */ | |
| /** If set, the dropdown opens when the input receives focus, but only when `searchable` is enabled @default `true` */ |
|
Thanks! |
No description provided.